<template>
  <div style="padding: 40px">
    <h2>级联组件 Demo(基础)</h2>
    <Cascader v-model="selectedValues" :options="options" />
  </div>
  <div style="padding: 40px">
    <h2>级联组件 Demo(支持搜索)</h2>
    <Cascader1
      v-model="selectedValues"
      :options="options"
      :load-children="loadChildren"
    />
  </div>
    <div style="padding: 40px">
    <h2>级联组件 Demo(多选)</h2>
    <Cascader2
      v-model="selectedValues"
      :options="options"
      :load-children="loadChildren"
    />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import Cascader from "./Cascader.vue";
import Cascader1 from "./Cascader1.vue";
import Cascader2 from "./Cascader2.vue";

const selectedValues = ref([]);

const options = [
  {
    value: "gd",
    label: "广东省",
    children: [
      {
        value: "gz",
        label: "广州市",
        children: [
          { value: "tianhe", label: "天河区" },
          { value: "yuexiu", label: "越秀区" },
        ],
      },
      {
        value: "sz",
        label: "深圳市",
        children: [
          { value: "nanshan", label: "南山区" },
          { value: "futian", label: "福田区" },
        ],
      },
    ],
  },
  {
    value: "bj",
    label: "北京市",
    children: [
      { value: "chaoyang", label: "朝阳区" },
      { value: "haidian", label: "海淀区" },
    ],
  },
];

// const options = [
//   {
//     value: 'gd',
//     label: '广东省',
//     children: [
//       { value: 'gz', label: '广州市', hasChildren: true }, // 动态
//       { value: 'sz', label: '深圳市', children: [{ value: 'ft', label: '福田区' }] } // 静态
//     ]
//   },
//   { value: 'bj', label: '北京市', hasChildren: true }
// ]


// 模拟异步接口
async function loadChildren(option) {
  console.log("正在加载:", option.label);
  await new Promise((r) => setTimeout(r, 1000)); // 模拟延时
  if (option.value === "gd") {
    return [
      { value: "gz", label: "广州市", hasChildren: true },
      { value: "sz", label: "深圳市", hasChildren: true },
    ];
  }
  if (option.value === "gz") {
    return [
      { value: "tianhe", label: "天河区" },
      { value: "yuexiu", label: "越秀区" },
    ];
  }
  if (option.value === "sz") {
    return [
      { value: "nanshan", label: "南山区" },
      { value: "futian", label: "福田区" },
    ];
  }
  if (option.value === "bj") {
    return [
      { value: "chaoyang", label: "朝阳区" },
      { value: "haidian", label: "海淀区" },
    ];
  }
  return [];
}
</script>
